<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
</body>
<script>
    // 1、Vue.extend(extendOptions) 继承函数的使用
    // extendOptions 为 构建的组件构造器提供 默认的配置参数
    //      extendOptions 取值为 Object 参数定义方式 类似于 new Vue 的 options
    // 返回一个基于 Vue 构造器为蓝本的 组件构造器（VueComponent）
    var CompA = Vue.extend();
    var vm1 = new CompA();
    var vm2 = new CompA();
    console.log(vm1,vm2);
    console.log(vm1.$options);
    console.log(vm2.$options);


    var CompB = Vue.extend({
        template:"<h1 @click='print()'>组件B的模板</h1>",
        methods: {
            print(){
                console.log("组件B的print方法");
            }
        },
    }); 
    var vm3 = new CompB();
    var vm4 = new CompB();
    console.log(vm3,vm4);
    console.log(vm3.$options);
    console.log(vm4.$options);

    var vm5 = new Vue({
        template:"<h1 @click='print()'>new Vue的模板</h1>",
        methods: {
            print(){
                console.log("new Vue的print方法");
            }
        },
    });
    var vm6 = new Vue({
        template:"<h1 @click='print()'>new Vue的模板</h1>",
        methods: {
            print(){
                console.log("new Vue的print方法");
            }
        },
    })
    console.log(vm5.$options);
</script>
</html>